<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
    <link rel="stylesheet" href="/static/css/aui.css">
    <link rel="stylesheet" href="/static/css/receipt.css">
    <title>智慧芜湖港</title>
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>

<body>
    <div id="app" class="content" v-cloak>
        <div class="userinfo">
            <div class="infoleft">
                <div class="info_top">
                    <ul>
                        <li></li>
                        <li>
                            <%=data['DriverName']%>
                        </li>
                    </ul>
                </div>
                <div class="info_bottom" ref="phone">
                    <%=data['PhoneNum']%>
                </div>
            </div>
            <div class="infomiddle" ref="truckLic">
                <%=data['TruckLic']%>
            </div>
            <div class="inforight">
                <div class="exit" v-on:click="exit"></div>
                <div class="fleetinfo">
                    <%=data['FleetCName']%>
                </div>
            </div>
        </div>
        <!-- 详细 -->
        <div class="ReceiptdDetail" v-if="Receipt" v-on:click.self="reback($event)">
            <table>
                <tr>
                    <td>
                        <div>小票编号:{{detailReceipt['ReceiptID']}}</div>
                        <div>
                            <div class="error aui-iconfont aui-icon-close" v-on:click.self="reback($event)"></div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div>箱号:{{detailReceipt['ContainerID']}}</div>
                        <div>箱位:{{detailReceipt['ContainerPlace']}}</div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div>作业号:{{detailReceipt['WorkID']}}</div>
                        <div>预约号:{{detailReceipt['ResvID']}}</div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div>箱号:{{detailReceipt['ContainerID']}}</div>
                        <div>箱位:{{detailReceipt['ContainerPlace']}}</div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div>箱重:{{detailReceipt['ContainerWeight']}}</div>
                        <div>地磅重量:{{detailReceipt['ContainerLoadometerWeight']}}</div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div>船名/航班:{{detailReceipt['ContainerFrom']}}</div>
                        <div>通道:{{detailReceipt['Channel']}}</div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div>箱型:{{detailReceipt['ContainerType']}}</div>
                        <div>状态:{{detailReceipt['ContainerStatus']}}</div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div>持箱人:{{detailReceipt['ContainerOwner']}}</div>
                        <div>超限:{{detailReceipt['ContainerLimit']}}</div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div>车号:{{detailReceipt['TruckLic']}}</div>
                        <div>前/后:{{detailReceipt['ContainerFB']}}</div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div v-if="detailReceipt['WorkMode']==1">作业方式:提</div>
                        <div v-else>作业方式:送</div>
                        <div>温度:{{detailReceipt['ContainerCold']}}</div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div>危类:{{detailReceipt['ContainerDangerCat']}}</div>
                        <div>冷藏:{{detailReceipt['ContainerCold']}}</div>
                    </td>
                </tr>
                <tr>
                    <td>提单号码:{{detailReceipt['GetTickID']}}</td>
                </tr>
                <tr>
                    <td>制证时间:{{detailReceipt['CreateTime']}}</td>
                </tr>
            </table>
        </div>
        <!-- 当前小票列表 -->
        <div id="ReceiptCurrent" v-if="current">
            <div class="tips">
                <div><span>当前</span>任务小票</div>
                <div v-on:click="ReceiptHistory"><span>历史</span>任务小票&#62;</div>
            </div>
            <div class="container">
                <div class="top">
                    <div>注:点击小票查看详情</div>
                    <div>点击箭头查看导航</div>
                </div>
                <ul class="content_list">
                    <li v-for="(item,index) in CurrentReceipt" v-bind:class="{'list1':item.IsReActive==0,'list2':item.IsReActive==1}">
                        <div v-bind:class="{youhuichuo1:item.CouponStatus>0}">
                            <div v-bind:class="{youhui_top1:item.CouponStatus>0}" v-show="item.CouponStatus>0">大桥证</div>
                            <div class="youhui_bottom" v-if="item.CouponStatus>0"><span v-bind:class="{'list1_CouponStatus':item.CouponStatus==2,'list2_CouponStatus':item.CouponStatus==1,'list3_CouponStatus':item.CouponStatus==0}">进</span><span v-bind:class="{'list1_CouponStatus':item.CouponStatus==3,'list2_CouponStatus':item.CouponStatus==1,'list3_CouponStatus':item.CouponStatus==0}">出</span></div>
                        </div>
                        <div class="list_left" v-if="item.WorkMode==1">提</div>
                        <div class="list_left" v-else>送</div>
                        <div v-on:click="ReceiptDetail(item)" v-bind:class="{'list_middle':item.IsReActive==0,'list_middle1':item.IsReActive==1}">
                            <div class="list_middle_top">箱位:{{item.ContainerPlace}}</div>
                            <div class="list_middle_middle">箱号:{{item.ContainerID}}</div>
                            <div class="list_middle_bottom">制证时间:{{item.CreateTime}}({{item.Channel}})</div>
                        </div>
                        <div class="list_right">
                            <!-- <div v-bind:class="{'list_right_top1':item.ReceiptStatus==0,'list_right_top2':item.ReceiptStatus==1}" @click="goComplish(item)"></div> -->
                            <div class="list_right_top1" @click="goComplish(item)"></div>
                            <div v-if="item.ReceiptStatus==0" class="list_right_bottom1" @click="gardenInfo(item,'current')">去完成</div>
                            <div v-else class="list_right_bottom2">已完成</div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 历史小票列表 -->
        <div id="ReceiptHistory" v-if='history'>
            <div class="tips">
                <div v-on:click="ReceiptCurrent">&#60;<span>当前</span>任务小票</div>
                <div><span>历史</span>任务小票</div>
            </div>
            <div class="container">
                <div class="top">
                    <div>注:点击小票查看详情</div>
                    <div>点击箭头查看导航</div>
                </div>
                <ul class="content_list">
                    <li v-for="(item,index) in HistoryReceipt" class="list3">
                        <div v-bind:class="{'youhuichuo1':item.CouponStatus>0}">
                            <div v-bind:class="{youhui_top1:item.CouponStatus>0}" v-show="item.CouponStatus>0">大桥证</div>
                            <div class="youhui_bottom" v-if="item.CouponStatus>0"><span v-bind:class="{'list1_CouponStatus':item.CouponStatus==2,'list2_CouponStatus':item.CouponStatus==1,'list3_CouponStatus':item.CouponStatus==0}">进</span><span v-bind:class="{'list1_CouponStatus':item.CouponStatus==3,'list2_CouponStatus':item.CouponStatus==1,'list3_CouponStatus':item.CouponStatus==0}">出</span></div>
                        </div>
                        <div class="list_left" v-if="item.WorkMode==1">提</div>
                        <div class="list_left" v-else>送</div>
                        <div class="list_middle" v-on:click="ReceiptDetail(item)">
                            <div class="list_middle_top">箱位:{{item.ContainerPlace}}</div>
                            <div class="list_middle_middle">箱号:{{item.ContainerID}}</div>
                            <div class="list_middle_bottom">制证时间:{{item.CreateTime}}({{item.Channel}})</div>
                        </div>
                        <!-- <div class="list_right">
                            <div v-bind:class="{'list_right_top1':item.ReceiptStatus==1,'list_right_top2':item.ReceiptStatus==0}" @click="goComplish(item)"></div>
                            <div v-if="item.ReceiptStatus==1" class="list_right_bottom1" @click="gardenInfo(item)">去完成</div>
                            <div v-else class="list_right_bottom2">已完成</div>
                        </div> -->
                        <div class="list_right">
                            <!-- <div v-bind:class="{'list_right_top1':item.ReceiptStatus==0,'list_right_top2':item.ReceiptStatus==1}" @click="goComplish(item)"></div> -->
                            <div class="list_right_top1" @click="goComplish(item)"></div>
                            <div v-if="item.ReceiptStatus==0" class="list_right_bottom1" @click="gardenInfo(item,'history')">去完成</div>
                            <div v-else class="list_right_bottom2">已完成</div>
                        </div>
                    </li>
                </ul>
                <!-- 加载 -->
                <div class="loading" v-show="!scrollFlag">
                    <div class="gif"></div>
                    <div class="loadingText">{{loadingText}}</div>
                </div>
            </div>
        </div>

    </div>
    <script src="/static/js/vue.min.js"></script>
    <script src="/static/js/confirm.js"></script>
    <script src="/static/js/axios.min.js"></script>
    <script src="/static/js/aui-toast.js"></script>
    <script>
        var toast = new auiToast();
        var app = new Vue({
            el: "#app",
            data: {
                // 显示详情页
                Receipt: false,
                //小票的详细信息
                detailReceipt: {},
                current: true,
                history: false,
                //对加载的判断
                loadingText: '',
                scrollFlag: true,
                seeLoding: false,
                CurrentReceipt: [],
                //历史小票队列
                HistoryReceipt: [],
                pageNo: 1,
            },
            mounted: async function() {
                await this.getCurrentReceipt();
                await this.getHistoryReceipt();
            },
            methods: {
                reback: function(event) {
                    event.stopPropagation();
                    event.preventDefault();
                    this.Receipt = false;
                },
                exit: function() {
                    var x;
                    var r = confirm("确定要退出吗?");
                    if (r == true) {
                        axios.get('/api/exit', {
                                params: {
                                    phone: this.$refs.phone.innerText,
                                }
                            })
                            .then(res => {
                                if (res.data.code == '1') {
                                    alert('退出成功');
                                    document.cookie = "token=; expires=Thu, 18 Dec 1970 12:00:00 GMT; path=/";
                                    WeixinJSBridge.call('closeWindow');
                                } else {
                                    alert('退出失败');
                                }
                            })
                    } else {
                        return;
                    }
                },
                ReceiptCurrent: function() {
                    this.current = true;
                    this.history = false;
                    window.removeEventListener('scroll', this.getmore);
                },
                ReceiptHistory: function() {
                    this.current = false;
                    this.history = true;
                    window.addEventListener('scroll', this.getmore);
                },
                //小票详情
                ReceiptDetail: function(e) {
                    this.Receipt = true;
                    this.detailReceipt = e;
                },
                goComplish: function(e) {
                    let jwtToken = document.cookie.split('=')[1];
                    if (jwtToken == undefined) {
                        toast.fail({
                            title: 'token失效,请重新登录',
                            duration: 2000
                        });
                        return;
                    }
                    var place = e.ContainerPlace;
                    location.assign(`/api/gardenInfo?ContainerPlace=${place}&ReceiptId=hike`);

                },
                //点击去完成按钮
                gardenInfo: function(e, f) {
                    //箱位
                    var place = e.ContainerPlace;
                    var receiptId = e.ReceiptID
                    let jwtToken = document.cookie.split('=')[1];
                    axios.get('/api/toComplishBtn', {
                            headers: {
                                authorization: jwtToken,
                            },
                            params: {
                                ContainerPlace: place,
                                ReceiptId: receiptId
                            }
                        }).then(value => {
                            if (value.data.code == 1) {
                                if (f == 'current') {
                                    let arr = this.CurrentReceipt;
                                    let _this = this;
                                    arr.map(function(item, index) {
                                        if (e.ReceiptID == item.ReceiptID) {
                                            _this.CurrentReceipt[index].ReceiptStatus = 1;
                                        }
                                    })

                                } else {
                                    let arr = this.HistoryReceipt;
                                    let _this = this;
                                    arr.map(function(item, index) {
                                        if (e.ReceiptID == item.ReceiptID) {
                                            _this.HistoryReceipt[index].ReceiptStatus = 1;
                                        }
                                    })
                                }
                            }
                        }).catch(function(error) {
                            if (error.response) {
                                console.log(error.response.data);
                                toast.fail({
                                    title: error.response.data.msg,
                                    duration: 2000
                                })
                            }
                        })
                        // location.assign(`/api/gardenInfo?ContainerPlace=${place}&ReceiptId=${receiptId}`);
                },
                // reback: function() {
                //     this.Receipt = false;
                // },
                sleep_time: function(params) {
                    return new Promise(function(resolve, reject) {
                        setTimeout(() => {
                            resolve()
                        }, params);
                    })
                },
                getmore: async function() {
                    if (!this.scrollFlag) {
                        return;
                    }
                    let clientHeight = document.documentElement.clientHeight;
                    let scrollTop = document.documentElement.scrollTop;
                    let scrollHeight = document.documentElement.scrollHeight;
                    if (clientHeight + scrollTop >= scrollHeight) {
                        this.scrollFlag = false;
                        try {
                            let jwtToken = document.cookie.split('=')[1];
                            let trucklic = this.$refs.truckLic.innerText;
                            this.loadingText = "加载中,请稍侯!"
                            await this.sleep_time(2000);
                            let result = await axios({
                                headers: {
                                    authorization: jwtToken
                                },
                                method: 'post',
                                url: "/api/historyReceipt",
                                data: {
                                    // truckLic: encodeURIComponent(trucklic),
                                    truckLic: trucklic,
                                    pageNo: this.pageNo,
                                    pageSize: 10
                                }
                            }).catch(function(error) {
                                if (error.response) {
                                    console.log(error.response.data);
                                    toast.fail({
                                        title: error.response.data.msg,
                                        duration: 2000
                                    })
                                }
                            });
                            result = result.data;
                            if (result.code == 1) {
                                this.loadingText = "加载成功!"
                                await this.sleep_time(1000);
                                this.HistoryReceipt.push(...result.data);
                                this.pageNo++;

                            } else {
                                this.loadingText = "已加载到底!"
                                await this.sleep_time(3000);
                                window.removeEventListener('scroll', this.getmore);
                            }
                            this.scrollFlag = true;
                            return;
                        } catch (error) {
                            this.loadingText = "加载失败,正在重新加载!"
                            await this.sleep_time(2000)
                            this.scrollFlag = true;
                            return;
                        }
                    } //执行结束地方
                },
                // 获取当前任务小票
                getCurrentReceipt: async function() {
                    let jwtToken = document.cookie.split('=')[1]
                    let trucklic = this.$refs.truckLic.innerText;
                    let result = await axios({
                        headers: {
                            authorization: jwtToken
                        },
                        method: 'post',
                        url: "/api/currentReceipt",
                        data: {
                            truckLic: trucklic,
                        }
                    }).catch(function(error) {
                        if (error.response) {
                            console.log(error.response.data);
                            toast.fail({
                                title: error.response.data.msg,
                                duration: 2000
                            })
                        }
                    });
                    result = result.data;
                    if (result.code == 1) {
                        let data1 = result.data[0];
                        let data2 = result.data[1];
                        this.CurrentReceipt = [...data1, ...data2];
                    } else {
                        console.log('当前无任务小票')
                    }
                },
                //获取历史小票
                getHistoryReceipt: async function() {
                    let jwtToken = document.cookie.split('=')[1];
                    try {
                        let trucklic = this.$refs.truckLic.innerText;
                        let result = await axios({
                            headers: {
                                authorization: jwtToken
                            },
                            method: 'post',
                            url: "/api/historyReceipt",
                            data: {
                                truckLic: trucklic,
                                pageNo: this.pageNo,
                                pageSize: 10
                            }
                        }).catch(function(error) {
                            if (error.response) {
                                console.log(error.response.data);
                                toast.fail({
                                    title: error.response.data.msg,
                                    duration: 2000
                                })
                            }
                        });
                        result = result.data
                        if (result.code == 1) {
                            this.HistoryReceipt = [...result.data];
                            this.pageNo++;
                        } else {
                            console.log("没有历史小票");
                        }
                    } catch (error) {
                        console.log("小票获取失败" + error);
                    }

                }

            },
        })
    </script>
</body>

</html>